<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item label="所属事件" prop="eventId">
      <el-select v-model="newFormInline.eventId" placeholder="请选择事件">
        <el-option
          v-for="option in eventOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="段号" prop="section">
      <el-input
        v-model="newFormInline.section"
        type="number"
        placeholder="请输入段号"
      />
    </el-form-item>
    <el-form-item label="条件内容" prop="condition">
      <el-input
        v-model="newFormInline.condition"
        placeholder="请输入条件内容"
      />
    </el-form-item>
    <el-form-item label="操作符" prop="conditionOpt">
      <el-select
        v-model="newFormInline.conditionOpt"
        placeholder="请选择操作符"
      >
        <el-option label="无" :value="'null'" />
        <el-option label="与(&&)" :value="'&&'" />
        <el-option label="或(||)" :value="'||'" />
        <el-option label="非(!)" :value="'!'" />
        <el-option label="等于(==)" :value="'=='" />
        <el-option label="不等于(!=)" :value="'!='" />
        <el-option label="大于(>)" :value="'>'" />
        <el-option label="大于等于(>=" :value="'>='" />
        <el-option label="小于(<)" :value="'<'" />
        <el-option label="小于等于(<=)" :value="'<='" />
      </el-select>
    </el-form-item>
    <el-form-item label="条件参数" prop="conditionParams">
      <el-input
        v-model="newFormInline.conditionParams"
        type="textarea"
        placeholder="JSON格式参数"
      />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, withDefaults, watch, onMounted } from "vue";

import { ConditionFormProps } from "../componentsUtils/type/conditionTypes";
import { formRules } from "../componentsUtils/rule/conditionRules";

const props = withDefaults(defineProps<ConditionFormProps>(), {
  formInline: () => ({
    id: 0,
    dealerId: 0,
    tenantId: 0,
    eventId: 0,
    section: 0,
    condition: "",
    conditionOpt: "",
    conditionParams: ""
  }),
  title: "",
  eventOptions: () => [
    {
      label: "无事件",
      value: 0
    }
  ]
});

const newFormInline = ref(props.formInline);
const ruleFormRef = ref();

// 监听props变化，更新表单数据
watch(
  () => props.formInline,
  newValue => {
    newFormInline.value = { ...newValue };
  },
  { deep: true }
);
// 添加获取表单数据的方法
function getFormData() {
  return newFormInline.value;
}
function getRef() {
  return ruleFormRef.value;
}
onMounted(() => {
  newFormInline.value.eventId = 0;
});
defineExpose({ getRef, getFormData });
</script>
